<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  
  <title>jQuery Masonry</title>
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <link rel="stylesheet" href="css/style.css" />
  
  
    <script src="js/modernizr-transitions.js"></script>
  
  <!-- scripts at bottom of page -->

</head>
<body class="homepage ">
  
  <nav id="site-nav">
    <h1><a href="index.html">jQuery Masonry</a></h1>
    
    <h2>Docs</h2>
    
    <ul class="docs-list">
      
        
          
            <li><a href="./docs/intro.html">Introduction</a>
          
        
      
        
          
            <li><a href="./docs/options.html">Options</a>
          
        
      
        
          
            <li><a href="./docs/methods.html">Methods</a>
          
        
      
        
          
            <li><a href="./docs/animating.html">Animating</a>
          
        
      
        
          
            <li><a href="./docs/help.html">Help</a>
          
        
      
    </ul>

    <h2>Demos</h2>
    
    <ul class="demos-list">
      
        
          
            <li><a href="./demos/basic-single-column.html">Basic single-column</a>
          
        
      
        
          
            <li><a href="./demos/basic-multi-column.html">Basic multi-column</a>
          
        
      
        
          
            <li><a href="./demos/images.html">Images</a>
          
        
      
        
          
            <li><a href="./demos/tumblelog.html">Tumblelog example</a>
          
        
      
        
          
            <li><a href="./demos/animating-jquery.html">Animating with jQuery</a>
          
        
      
        
          
            <li><a href="./demos/animating-css-transitions.html">Animating with CSS Transitions</a>
          
        
      
        
          
            <li><a href="./demos/animating-modernizr.html">Animating with Modernizr</a>
          
        
      
        
          
            <li><a href="./demos/adding-items.html">Adding items</a>
          
        
      
        
          
            <li><a href="./demos/infinite-scroll.html">Infinite Scroll</a>
          
        
      
        
          
            <li><a href="./demos/gutters.html">Gutters</a>
          
        
      
        
          
            <li><a href="./demos/right-to-left.html">Right-to-left</a>
          
        
      
        
          
            <li><a href="./demos/centered.html">Centered</a>
          
        
      
        
          
            <li><a href="./demos/fluid.html">Fluid</a>
          
        
      
        
          
            <li><a href="./demos/corner-stamp.html">Corner stamp</a>
          
        
      
    </ul>
    
  </nav> <!-- #site-nav -->
  
  <section id="content">
    
    
    
    <div id="container" class="transitions-enabled clearfix">
  
  <div class="item big-text col2">
    A dynamic layout plugin for jQuery<br />
    The flip-side of CSS floats<br />
    <br />
    &larr; View docs and demos
  </div>
  
  <div class="item big-text">
    Before: CSS Floats
    <div class="mini">
      
        <div class="w1 h1">1</div>
      
        <div class="w1 h1">2</div>
      
        <div class="w1 h2">3</div>
      
        <div class="w1 h1">4</div>
      
        <div class="w2 h1">5</div>
      
        <div class="w1 h2">6</div>
      
        <div class="w1 h1">7</div>
      
        <div class="w2 h2">8</div>
      
        <div class="w2 h1">9</div>
      
        <div class="w1 h1">10</div>
      
        <div class="w2 h2">11</div>
      
        <div class="w2 h1">12</div>
      
    </div>
  </div>
  
  <div class="item big-text">
    After: Masonry
    <div id="mini-container" class="mini">
      
        <div class="w1 h1">1</div>
      
        <div class="w1 h1">2</div>
      
        <div class="w1 h2">3</div>
      
        <div class="w1 h1">4</div>
      
        <div class="w2 h1">5</div>
      
        <div class="w1 h2">6</div>
      
        <div class="w1 h1">7</div>
      
        <div class="w2 h2">8</div>
      
        <div class="w2 h1">9</div>
      
        <div class="w1 h1">10</div>
      
        <div class="w2 h2">11</div>
      
        <div class="w2 h1">12</div>
      
    </div>
  </div>
  
  <div class="item link">
    <a href="jquery.masonry.min.js">Download the script jquery.&#8203;masonry.&#8203;min.js</a>
  </div>
  
  <div class="item link">
    <a href="http://meta.metafizzy.co/files/masonry-site.zip">Download this project</a>
  </div>
  
  <div class="item link">
    <a href="https://github.com/desandro/masonry">Masonry on GitHub</a>
  </div>
  
  <div class="item big-text loading">
    <img src="http://i.imgur.com/6RMhx.gif" />
    Loading Examples
  </div>
  
</div> <!-- #container -->

<script src="js/jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
  $(function(){
    
    var $container = $('#container');
    
    $('#mini-container').masonry({
      columnWidth: 50
    });
    
    $container.masonry({
      itemSelector: '.item',
      columnWidth: 240,
      isAnimated: !Modernizr.csstransitions
    });
    
    // Sites using Masonry markup
    var $sites = $('#sites'),
        $loadingItem = $container.find('.loading');
        
    var ajaxError = function(){
      $loadingItem.text('Could not load examples :(');
    };
    
    // dynamically load sites using Masonry from Zootool
    $.getJSON('http://zootool.com/api/users/items/?username=desandro' +
        '&apikey=8b604e5d4841c2cd976241dd90d319d7' +
        '&tag=bestofmasonry&callback=?')
      .error( ajaxError )
      .success(function( data ){
        
        // proceed only if we have data
        if ( !data || !data.length ) {
          ajaxError();
          return;
        }
        var items = [],
            item, datum;
        
        for ( var i=0, len = data.length; i < len; i++ ) {
          datum = data[i];
          item = '<div class="item example"><a href="' + datum.url + '">'
            + '<img src="' + datum.image.replace('/l.', '/m.') + '" />'
            + '<b>' + datum.title + '</b>'
            + '</a></div>';
          items.push( item );
        }
        
        var $items = $( items.join('') );
        $items.imagesLoaded(function(){
          $container
            .masonry( 'remove', $loadingItem ).masonry()
            .append( $items ).masonry( 'appended', $items, true );
        });
        
      });
    
  });
</script>
    
    <footer id="site-footer">
      jQuery Masonry by <a href="http://desandro.com">David DeSandro</a>
    </footer>
    
  </section> <!-- #content -->

</body>
</html>